<template>
	<div class="vip">
		<div class="vip_head">
			<span>会员·尊享版</span>
		</div>
		<div class="vip_backup">
			<div></div>
			<div></div>
		</div>
		<div class="vip_card">
			<div class="vip_card_dir">开通会员每月领红包</div>
			<div class="vip_card_dir vip_card_idir">无门槛红包 价值30</div>
			<div class="vip_card_redbag">
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
				<div class="redbag"><span>￥5</span><span>无门槛</span></div>
			</div>
			<div class="vip_card_dir vip_card_idir">选择开通会员</div>
			<van-tabs  sticky swipeable>
				<van-tab title="开通普通会员">
					<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
						<div class="vipopen">
							<div v-model="lv1">普通会员LV1</div>
							<div>￥15/月</div>
							<van-stepper style="margin:auto;"v-model="value1" theme="round" button-size="22" disable-input />
						</div>
					</van-pull-refresh>
					<van-button round
						type="primary" 
						size="large"
						:disabled="flag1"
						style="margin-top: 10px;"
						color="linear-gradient(to right, #ffc329, #f66e2a)" @click=becomeVip(lv1,value1)>￥{{mul(value1,mul(15,0.95))}} 开通{{value1}}个月普通会员</van-button>
				</van-tab>									

				<van-tab title="开通白金会员">
					<div class="vipopen">
						<div v-model="lv2">白金会员LV2</div>
						<div>￥20/月</div>
						<van-stepper style="margin:auto;"v-model="value2" theme="round" button-size="22" disable-input />
					</div>
					<van-button round
						type="primary" 
						size="large"
						:disabled="flag2"
						style="margin-top: 10px;"
						color="linear-gradient(to right, #ffc329, #f66e2a)" @click="becomeVip(lv2,value2)">￥{{mul(value2,mul(20,0.93))}} 开通{{value2}}个月普通会员</van-button>
				</van-tab>
				
				<van-tab title="开通钻石会员">
					<div class="vipopen">
						<div v-model="lv3">钻石会员LV3</div>
						<div>￥27/月</div>
						<van-stepper style="margin:auto;"v-model="value3" theme="round" button-size="22" disable-input />
					</div>
					<van-button round
						type="primary" 
						size="large"
						:disabled="flag3"
						style="margin-top: 10px;"
						color="linear-gradient(to right, #ffc329, #f66e2a)" @click="becomeVip(lv3,value3)">￥{{mul(value3,mul(30,0.90))}} 开通{{value3}}个月普通会员</van-button>
				</van-tab>
			</van-tabs>
			<div class="vip_card_open" >
				
				
			
			</div>
			
		</div>
		<Navtab></Navtab>
	</div>
</template>

<script>
	import Navtab from "@/components/Navtab.vue";
	import Vue from 'vue';
	import { Notify } from 'vant';
	export default {
		name: "VIP",
		data() {
			return {
				isLoading: false,
				vipList:[],
				value1:1,
				value2:1,
				value3:1,
				lv1:1,
				lv2:2,
				lv3:3,
				flag1:false,
				flag2:false,
				flag3:false,
			}
		},
		created() {
			Vue.axios.get(`http://localhost:8080/constant/getByKind`,{params:{
				kind:3
			}}).then(
				r=>{
					console.log(r.data);
					this.vipList = r.data.lvList;
				}
			),
			Vue.axios.get(`http://localhost:8080/user/getlogin`).then(r=>{
				console.log(r.data);
				if(! r.data.loginUser){
					//Notify('对不起,请先登录!');
				}else{
					if(r.data.vipLv.vip_lv == 1){
					//
					}
					if(r.data.vipLv.vip_lv == 2){
						this.flag1 = true;
					}
					if(r.data.vipLv.vip_lv == 3){
						this.flag1 = true;
						this.flag2 =  true;
					}
				}
				
			 });	 
		},
		components: {
			Navtab
		},
		methods:{
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 500);
			},
			mul(arg1, arg2) {
			        var m = 0,
			          s1 = arg1.toString(),
			          s2 = arg2.toString();
			        try {
			          m += s1.split(".")[1].length
			        } catch (e) {}
			        try {
			          m += s2.split(".")[1].length
			        } catch (e) {}
			        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			becomeVip(arg1,arg2){
				// console.log("等级:"+arg1);
				// console.log("时长:"+arg2);
				Vue.axios.get(`http://localhost:8080/user/getlogin`).then(r=>{
					console.log(r.data)
					//this.userObject = r.data.loginUser;
					if(! r.data.loginUser){
						Notify('对不起,请先登录!');
						
					}else{
						Vue.axios.get(`http://localhost:8080/vip/becomevip`,{params:{
							vip_lv : arg1,
							time: arg2
						}}).then(
							r=>{
								Notify({ type: 'warning', message: '开通成功' });
								console.log(r.data);
							}
						)
					}
				});
				
				
			},
		},
	}
</script>

<style lang="less">
	.vip {
		overflow: auto;
		width: 100%;

		.vip_head {
			height: 50px;
			background-color: #fec22c;
			display: flex;

			>span {
				margin: auto;
				font-size: 18px;
				color: #303133;
				font-weight: 400;
				letter-spacing: 1px;
			}
		}

		.vip_backup {
			height: 400px;
			width: 100%;
			background-color: #fec22c;
			position: absolute;
			top: 50px;
			z-index: -1;

			div:nth-child(1) {
				height: 150px;
				background-color: #fec22c;
			}

			div:nth-child(2) {
				height: 250px;
				background: linear-gradient(to bottom, #fec22c, #F0F0F0);
			}
		}

		.vip_card {
			height: 550px;
			margin: 15px;
			
			background-color: rgba(245, 247, 210, 0.8);
			//background-color: lightblue;
			box-shadow: 0 2px 4px 0 rgba(245, 247, 210, 0.1), 0 0 6px rgba(245, 247, 210, 0.1);
			border-radius: 20px;
			display: flex;
			flex-direction: column;

			.vip_card_dir {
				margin: 10px auto;
				font-family: "Helvetica Neue";
				font-size: 18px;
				line-height: 20px;
				color: #836c4f;
				font-weight: 600;
				letter-spacing: 1px;
			}

			.vip_card_idir {
				font-size: 14px;
				margin: 10px 10px;
			}

			.vip_card_redbag {
				margin: 10px 10px 0 10px;
				height: 160px;
				display: flex;
				flex-wrap: wrap;
			}
		}
		//开通vip框
		.vipopen{
			width: 200px;
			height: 170px;
			margin:0 auto;
			margin-top:10px;
			border-radius: 10px;
			background-color: #F9F9E3;
			display: flex;
			flex-direction: column;
			div:nth-child(1){
				font-size: 26px;
				//line-height: 60px;
				color: #836c4f; 
				font-weight: 600; 
				letter-spacing: 1px;
				margin: 20px auto;
				}
			div:nth-child(2){
				font-size: 20px;
				line-height: 20px;
				color: #ff0033; 
				font-weight: 600; 
				letter-spacing: 1px;
				margin: 20px auto;
			}
			}
			.vipopen:hover{
				
				box-shadow:  0 0 6px rgba(245, 182, 81, 0.5)
			}
		

		.redbag {
			background-color: #f9f9d5;
			width: 90px;
			height: 60px;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			margin: 0 8px;
			align-items: center;
			position: relative; //设置定位
			//background-color: lightblue;
			>span{
				&:nth-child(1){
					font-size: 20px;
					line-height: 18px;
					margin: 10px 0 0 0;
					font-weight: 600; 
					letter-spacing: 2px;
					color: #ff0033;
				}
				&:nth-child(2){
					font-size: 14px;
					letter-spacing: 1px;
					color: #836c4f;
				}
			}
		}

		.redbag::before {
			content: "";
			width: 16px;
			height: 16px;
			border-radius: 50%;
			display: block;
			background: rgba(251, 247, 206, 1.0);
			position: absolute;
			top: 70%;
			left: -8px;
			transform: translateY(-50%);
		}

		.redbag::after {
			content: "";
			width: 16px;
			height: 16px;
			border-radius: 50%;
			display: block;
			background:rgba(251, 247, 206, 1.0);
			position: absolute;
			top: 70%;
			right: -8px;
			transform: translateY(-50%);
		}
		.van-button__text{
			font-size: 22px;
			//line-height: 16px;
			color: #fff; 
			font-weight: 600; 
			letter-spacing: 2px;
		}
		.van-tabs__nav{
			background-color:rgba(254, 197, 63, 1);
		}
		.van-tab__text{
			color: #6b5840; 
			font-weight: 400;
			font-size: 14px;
		}
	}
</style>
